<template>
  <el-dialog
    :title="dialogTitle"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="vip-container" style="padding: 10px;">
      <el-form
        ref="vip"
        :model="vip"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="vip.name" readonly />
        </el-form-item>
        <el-form-item label="服务价格" prop="price">
          <el-input v-model="vip.price" />
        </el-form-item>
        <el-form-item label="享受折扣" prop="discount">
          <el-input v-model="vip.discount" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('vip')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('vip')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { addVipService, getVipInfoById, modifyVipService } from '@/api/vip'
import { Message } from 'element-ui'
export default {
  name: 'VipDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      vip: {
        price: '',
        name: '',
        discount: ''
      },
      AddRules: { // 对话框表单验证
        price: [{ required: true, message: '会员价格不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '服务名称不能为空', trigger: 'blur' }],
        discount: [{ required: true, message: '享受折扣不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getVipInfoById(this.id).then(res => {
          if (res) {
            this.vip.name = res.data.data.name
            this.vip.price = res.data.data.price
            this.vip.discount = res.data.data.discount
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyVipService(this.id, this.vip).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            this.vip.name = this.vip.name.value
            addVipService(this.vip).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.$emit('closeDialog')
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.vip.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 570px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 510px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
